﻿@page "/Persona"

@using FluentUI.Demo.Shared.Pages.Persona.Examples

<h1>Persona</h1>

<p>A Persona is a visual representation of a person with an avatar. A status can be specified optionally.</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="typeof(PersonaDefault)">
    <Description>
        Display a person with his avatar and his status.
    </Description>
</DemoSection>

<DemoSection Title="With no image (Default initials)" Component="typeof(PersonaNoImage)">
    <Description>
        If no image is specified, the initials of the person is automatically retrieved.
    </Description>
</DemoSection>

<DemoSection Title="With no image (Specific initials)" Component="typeof(PersonaInitials)">
    <Description>
        Explicit initials for the person can be defined with the <code>Initials</code> property.
    </Description>
</DemoSection>

<DemoSection Title="Dismiss action" Component="typeof(PersonaDismiss)">
    <Description>
        Display a "Dismiss" cross and raise an event.
    </Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentPersona)" />
